import 'package:flutter/material.dart';
import 'package:untitled/pages/FlutterUI/Travel/detail_page.dart';
import 'package:untitled/pages/FlutterUI/Travel/travelBean.dart';


class TravelHome extends StatelessWidget {
  const TravelHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor:Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        actions: [
          Padding(
            padding: EdgeInsets.only(right: 15),
            child: Icon(Icons.menu,color: Colors.black,),
          )
        ],
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal:15,vertical: 10),
            child: Text("Travel Blog",style: TextStyle(color: Colors.black,fontSize: 30),),
          ),
          Expanded(flex:2,child:TravelWidget() ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "Most Popular",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 20,
                  ),
                ),
                Text(
                  "View all",
                  style: TextStyle(
                    color: Colors.deepOrange,
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ),
          Expanded(child: MostPopularWidget(),flex: 1)

        ],
      ),
    );
  }
}


class TravelWidget extends StatelessWidget {
  const TravelWidget({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    List<TravelBean> _list = TravelBean.generateTravelBean();
    return PageView.builder(
      controller: PageController(viewportFraction: 0.9),
      itemBuilder: (context,index){
      var bean = _list[index];
      return GestureDetector(
        onTap: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context){
            return Detail(bean: bean);

          }));
        },
        child: Hero(
          tag: bean.url as String, 
          child: Stack(
            children: [
              Padding(
                padding: EdgeInsets.only(bottom: 30,right: 10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(5),
                  child: Image.asset(
                    bean.url as String,
                    width: MediaQuery.of(context).size.width,
                    fit: BoxFit.cover,
                  ),
                ),
                
              ),
              Positioned(
                 bottom: 80,
                  left: 15,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Material(
                        color: Colors.transparent,
                        child: Text(
                          bean.location as String,
                          style: TextStyle(
                            color: Colors.black54,
                            fontSize: 15,
                          ),
                        ),
                      ),
                      Material(
                        color: Colors.transparent,
                        child: Text(
                          bean.name as String,
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 20,
                          ),
                        ),
                      ),
                    ],
                  ),
              ),
              Positioned(
                  bottom: 0,
                  right: 30,
                  child: Container(
                    width: 60,
                    height: 60,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(30),
                    ),
                    child: Icon(
                      Icons.arrow_forward,
                      color: Colors.white,
                      size: 30,
                    ),
                  ),
                )
            ],
          )
        ),

      );
    },
    itemCount: _list.length,
    );
    
  }
}

class MostPopularWidget extends StatelessWidget {
  const MostPopularWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<TravelBean> _list = TravelBean.generateMostPopularBean();
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal:15),
      scrollDirection: Axis.horizontal,
      itemBuilder: (context,index){
      var bean = _list[index];
      return GestureDetector(
        onTap: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              return Detail(bean:bean);
            }));
        },
        child: Hero(
          tag: bean.url as String,
          child: Stack(
            children: [
              Padding(
                padding: EdgeInsets.only(bottom:30,right: 10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(5),
                  child: Image.asset(
                    bean.url as String,
                    width: 170,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Positioned(
                  bottom: 50,
                  left: 15,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Material(
                        color: Colors.transparent,
                        child: Text(
                          bean.location as String,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 15,
                          ),
                        ),
                      ),
                      Material(
                        color: Colors.transparent,
                        child: Text(
                          bean.name as String,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 15,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
            ],
          )
        ),

      );
    },
    itemCount: _list.length,
    );
    
  }
}